// components/Layout.js
import  '../components/styles/Layout.module.css'
import React, {useEffect, useState} from 'react';
import Link from 'next/link';
import {
    MenuFoldOutlined,
    MenuUnfoldOutlined,
    AccountBookOutlined,
    UserOutlined,
    RadarChartOutlined, LogoutOutlined, SlidersOutlined,
} from '@ant-design/icons';
import {Button, Layout, Menu, theme, Dropdown, Space} from 'antd';
import {useRouter} from "next/router";

const { Header, Sider, Content } = Layout;

const LayoutBox = ({ children }) => {
    const [collapsed, setCollapsed] = useState(false);
    const router = useRouter();
    const [userRole, setUserRole] = useState(null);
    const {
        token: { colorBgContainer, borderRadiusLG },
    } = theme.useToken();

    const items = [
        {
            label: '退出',
            key: '1',
            icon: <LogoutOutlined />,
        }
    ];


    // 根据角色决定菜单项
    const getMenuItems = () => {
        const items = [
            {
                key: '2',
                icon: <RadarChartOutlined />,
                label: <Link href="/dept_manage">寻找岗位</Link>,
            },
            {
                key: '3',
                icon: <AccountBookOutlined />,
                label: <Link href="/order_manage">订单管理</Link>,
            },
        ];

        if (userRole === 1) {
            items.unshift({
                key: '1',
                icon: <UserOutlined />,
                label: <Link href="/user_manage">用户管理</Link>,
            });
        }

        return items;
    };

    const handleMenuClick = (e) => {
        console.log('click', e);
        if(e.key==='1'){
            localStorage.removeItem('token');
            localStorage.removeItem('userInfo');
            router.push('/login');
        }
    };

    const menuProps = {
        items,
        onClick: handleMenuClick,
    };

    //根据路径确定 defaultSelectedKey
    const getDefaultSelectedKeys = () => {
        const path = router.pathname; // 获取当前路由路径
        switch (path) {
            case '/user_manage':
                return ['1'];
            case '/dept_manage':
                return ['2'];
            case '/':
                return ['4'];
            default:
                return []; // 当没有匹配时返回一个空数组
        }
    };

    useEffect(() => {
        const userInfo = JSON.parse(localStorage.getItem('userInfo'));
        setUserRole(userInfo ? userInfo.role : null);
    }, []);


    return (
        <Layout style={{ minHeight: '100vh' }}>
            <Sider trigger={null} collapsible collapsed={collapsed}>
                <Menu
                    theme="dark"
                    mode="inline"
                    defaultSelectedKeys={getDefaultSelectedKeys()}
                    items={getMenuItems()}
                />
            </Sider>
            <Layout>
                <Header
                    style={{
                        padding: 0,
                        background: colorBgContainer,
                        display: 'flex',
                        flexDirection: 'row',
                        alignItems: 'center',
                        justifyContent: 'space-between',
                    }}
                >
                    <Button
                        type="text"
                        icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
                        onClick={() => setCollapsed(!collapsed)}
                        style={{
                            fontSize: '16px',
                            width: 64,
                            height: 64,
                        }}
                    />
                    <Dropdown menu={menuProps} className="mr-5">
                        <Button>
                            <Space>
                                设置
                                <SlidersOutlined />
                            </Space>
                        </Button>
                    </Dropdown>
                </Header>
                <Content
                    style={{
                        margin: '24px 16px',
                        padding: 24,
                        minHeight: 280,
                        background: colorBgContainer,
                        borderRadius: borderRadiusLG,
                    }}
                >
                   {children}
                </Content>
            </Layout>
        </Layout>
    );
}

export default LayoutBox;
